<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<title>购物车</title>

<!-- Google font -->
<link
	href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700"
	rel="stylesheet">

<!-- Bootstrap -->
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/bootstrap.min.css" />

<!-- Slick -->
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/slick.css" />
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/slick-theme.css" />

<!-- nouislider -->
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/nouislider.min.css" />

<!-- Font Awesome Icon -->
<link rel="stylesheet"
	href="${path}/static/front/home/css/font-awesome.min.css">

<!-- Custom stlylesheet -->
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/style.css" />

<link rel="stylesheet" type="text/css"
	href="${path}/static/front/css/reset.css">
<link rel="stylesheet" type="text/css"
	href="${path}/static/front/css/main.css">

<!-- 自建Css -->
<link type="text/css" rel="stylesheet"
	href="${path}/static/front/home/css/my.css" />

<script src="${path}/static/front/home/js/jquery.min.js"></script>
<script src="${path}/static/front/home/js/bootstrap.min.js"></script>
<script src="${path}/static/front/home/js/slick.min.js"></script>
<script src="${path}/static/front/home/js/nouislider.min.js"></script>
<script src="${path}/static/front/home/js/jquery.zoom.min.js"></script>
<script src="${path}/static/front/home/js/main.js"></script>
<script src="${path}/static/common/layer/layer.js"></script>
<script src="${path}/static/common/layui/layui.js"></script>
<script src="${path}/static/common/mylayer.js" type="text/javascript"
	charset="utf-8"></script>
	
</head>
<body>
	<!-- HEADER -->
	<header>
		<!-- TOP HEADER -->
		<div id="top-header">
			<div class="container">
				<ul class="header-links pull-left">
					<li><a href="#"><i class="fa fa-phone"></i> 电话号码</a></li>
					<li><a href="#"><i class="fa fa-envelope-o"></i>
							1228999026@email.com</a></li>
					<li><a href="#"><i class="fa fa-map-marker"></i> 山东省青岛市黄岛区</a></li>
				</ul>
				<ul class="header-links pull-right">
					<li class = "ExitUser"><a href="#"><i class="fa fa-dollar"></i>${user.username }</a></li>
					<li class = "in_user"><a href="#"><i class="fa fa-user-o"></i> 个人中心</a></li>
				</ul>
			</div>
		</div>
		<!-- /TOP HEADER -->

		<!-- MAIN HEADER -->


		<div id="header">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">
					<!-- LOGO -->
					<div class="col-md-3">
						<div class="header-logo">
							<a href="${path}/home/home.shtml" class="logo"> <img
								src="${path}/static/front/home/img/logo.png" alt="">
							</a>
						</div>
					</div>
					<!-- /LOGO -->

				<!-- SEARCH BAR -->
						<div class="col-md-6">
							<div class="header-search">
								<form action="${path}/selectStore/getSelectStorePage.shtml" method="get">
									<select class="input-select">
										<option value="0">商品名</option>
									</select>
									<input class="input" name = "name" placeholder="根据商品名搜索" >
									<button class="search-btn" id="selectStore">搜索商品</button>
								</form>
							</div>
						</div>
						<!-- /SEARCH BAR -->

					<!-- ACCOUNT -->
					<div class="col-md-3 clearfix">
						<div class="header-ctn">
							<!-- Wishlist -->
							<div>
								<a href="#"> <i class="fa fa-heart-o"></i> <span>我喜欢的</span>
									<div class="qty">2</div>
								</a>
							</div>
							<!-- /Wishlist -->

							<!-- Cart -->
							<div class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown"
									aria-expanded="true" id="dropDown"> <i
									class="fa fa-shopping-cart"></i> <span>购物车</span>
									<div class="qty"  id="cartCount"></div>
								</a>
								<div class="cart-dropdown">
									<div class="cart-list">
										<div class="product-widget" id="productWidget">
											<div>登录后可查看您的购物车概览</div>
										</div>
									</div>
									<div class="cart-btns">
										<a class="login_cart" href="#">登录</a> <a class="in_cart"
											href="#">我的购物车 <i class="fa fa-arrow-circle-right"></i></a>
									</div>
								</div>
							</div>
							<!-- /Cart -->


						</div>
					</div>
					<!-- /ACCOUNT -->
				</div>
				<!-- row -->
			</div>
			<!-- container -->
		</div>
		<!-- /MAIN HEADER -->
	</header>
	<!-- /HEADER -->

	<!-- NAVIGATION -->
	<nav id="navigation">
		<!-- container -->
		<div class="container" style="margin: 0 auto;">
			<!-- responsive-nav -->
			<div id="responsive-nav">
				<!-- NAV -->
				<ul class="main-nav nav navbar-nav Category1">
					<c:forEach items="${topCategoryList}" var="topCategory">
						<li style=""><a id="Category1A">${topCategory.name}</a> <c:forEach
								items="${secondCategoryList}" var="secondCategory">
								<c:if test="${secondCategory.parentId==topCategory.id}">
									<ul class="Category2">
										<li id="Category2Li"><a id="Category2A"
											href="${path}/store/getStorePage.shtml?categoryId=${secondCategory.id}">${secondCategory.name}</a>
										</li>
									</ul>
								</c:if>
							</c:forEach></li>
					</c:forEach>
				</ul>
				<!-- /NAV -->
			</div>
			<!-- /responsive-nav -->
		</div>
		<!-- /container -->
	</nav>
	<!-- /NAVIGATION -->

	

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="${path}/userInfo/getUserInfoPage.shtml">· 个人信息</a></li>
				<li><a href="${path}/userOrder/getuserOrderPage.shtml" class="active">· 全部订单</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
			<h3 class="common_title2">全部订单</h3>
			
			<c:if test="${list[0] == null}">
				暂无订单，建议添加新订单哦
			</c:if>
			
			<c:forEach items="${list}" var="order"> 
					
			<ul class="order_list_th w978 clearfix">
				<li class="col01">${order.updateTime }</li>
				<li class="col02">订单号：${order.orderNo}</li>
				<li class="col02 stress">
					<c:choose>
						<c:when test="${order.status eq 0 }">
						       已取消
						</c:when>
						<c:when test="${order.status eq 10 }">
						       未付款
						</c:when>
						<c:when test="${order.status eq 20 }">
						       已付款
						</c:when>
						<c:when test="${order.status eq 40 }">
						       已发货
						</c:when>
						<c:when test="${order.status eq 50 }">
						       交易成功
						</c:when>
						<c:when test="${order.status eq 60 }">
						       交易关闭
						</c:when>
						<c:otherwise>
						   状态异常
						</c:otherwise>
					</c:choose>
				</li>
			</ul>
			<table class="order_list_table w980">
				<tbody>
					<tr>
						<td width="55%">
							<c:forEach items="${order.orderItemList }" var = "orderItem">
							<ul class="order_goods_list clearfix">
								<li class="col01"><img src="${orderItem.productImageFullUrl}"></li>
								<li class="col02">${orderItem.productName }<em>${orderItem.currentUnitPrice }元</em></li>
								<li class="col03">${orderItem.quantity }</li>
								<li class="col04">${orderItem.totalPrice}元</li>
							</ul>
							</c:forEach>
							
						</td>

						<td width="15%">${order.receiverName }</td>
						<td width="15%">
							<c:choose>
								<c:when test="${order.status eq 0 }">
								       已取消
								</c:when>
								<c:when test="${order.status eq 10 }">
								       未付款
								</c:when>
								<c:when test="${order.status eq 20 }">
								       已付款
								</c:when>
								<c:when test="${order.status eq 40 }">
								       已发货
								</c:when>
								<c:when test="${order.status eq 50 }">
								       交易成功
								</c:when>
								<c:when test="${order.status eq 60 }">
								       交易关闭
								</c:when>
								<c:otherwise>
								   状态异常
								</c:otherwise>
							</c:choose>
						</td>
						<td width="15%"><a href="#" class="oper_btn">查看物流</a></td>
					</tr>
				</tbody>
			</table>
			</c:forEach>
		</div>
	</div>


	<!-- SECTION -->
	<div class="section">
		<!-- container -->
		<div class="container">
			<!-- row -->
			<div class="row"></div>
			<!-- /row -->
		</div>
		<!-- /container -->
	</div>
	<!-- /SECTION -->
	
	<!-- FOOTER -->
		<footer id="footer">
			<!-- top footer -->
			<div class="section">
				<!-- container -->
				<div class="container">
					<!-- row -->
					<div class="row">
						<div class="col-md-3 col-xs-6">
							<div class="footer">
								<h3 class="footer-title">进入后台管理</h3>
								<a href="${path}/user/getLoginListPage.action""><i class="fa fa-envelope-o"></i>需要相应权限才可进入</a>
							</div>
						</div>

					</div>
					<!-- /row -->
				</div>
				<!-- /container -->
			</div>
			<!-- /top footer -->
		</footer>
		<!-- /FOOTER -->

	<!-- 登录框 -->
	<div id="loginFrom" class="login_form fr" style="display: none">
		<div class="login_title clearfix">
			<h1>用户登录</h1>
			<a href="#">立即注册</a>
		</div>
		<div class="form_input">
			<form id="form">
				<input type="text" name="username" class="name_input"
					placeholder="请输入用户名">
				<div class="user_error">输入错误</div>
				<input type="password" name="password" class="pass_input"
					placeholder="请输入密码">
				<div class="pwd_error">输入错误</div>
				<div class="more_input clearfix">
					<input type="checkbox" name=""> <label>记住用户名</label> <a
						href="#">忘记密码</a>
				</div>
			</form>
			<input type="button" name="" value="登录" class="input_submit"
				onclick="submitForm()">
		</div>
	</div>

	<script type="text/javascript">
		$("#dropDown").on(
			"click",
			function(){
				var user = "${user}";
				var name = "${user.username}";
				if (user == "") {// 这个用户没有登录,弹出登录框
					mylayer.errorMsg("您尚未登录");
				} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
					$.post(
							"${path}/store/selectUserCart.shtml",
							 {
								"userId" : "${user.id}"
							  }, 
							  function(listUC) {
									console.log(listUC);
									var html = "<div class='product-widget' ><div class='product-img'><img src='"+listUC[0].product.mainImageFullUrl+"' alt=''></div><div class='product-body'><h3 class='product-name'><a href='${path}/product/product.shtml?id="+ listUC[0].product.id +"&categoryId="+ listUC[0].product.categoryId +"' >"+listUC[0].product.name+"</a></h3></br><h4 class='product-price'>共有："+listUC[0].quantity+" 件</h4><h4 class='product-price'>商品单价为：$"+listUC[0].product.price+ "</h4></div><button class='delete'><i class='fa fa-close'></i></button></div>"
									for(var i = 1; i < listUC.length; i++) {
										html += "<div class='product-widget' ><div class='product-img'><img src='"+listUC[i].product.mainImageFullUrl+"' alt=''></div><div class='product-body'><h3 class='product-name'><a href='${path}/product/product.shtml?id="+ listUC[i].product.id +"&categoryId="+ listUC[i].product.categoryId +"' >"+listUC[i].product.name+"</a></h3></br><h4 class='product-price'>共有："+listUC[i].quantity+" 件</h4><h4 class='product-price'>商品单价为：$"+listUC[i].product.price+ "</h4></div><button class='delete'><i class='fa fa-close'></i></button></div>"
									}
									$("#productWidget").html(html); // innerHtml
									$("#cartCount").html(i);
							  	},
							"json"
						);
				}
			}
		);
	
		$(".in_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successUrl(
								"正在进入"+userName+"的购物车",
								"${path}/cart/getCartListPage.shtml");
							}
					});
		
		$(".in_user").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successUrl(
								"正在进入"+userName+"的个人中心",
								"${path}/userInfo/getUserInfoPage.shtml");
							}
					});
		
		$(".login_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successMsg("用户"+userName+"您已登录了");
					}
					});

		$(".insert_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					console.log(user);
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						var productId = $("#productId").attr("name");
						console.log("productId="+productId);
						
							}
					});
		
		$(".ExitUser").on(
				"click",
				function() {
					//退出当前用户
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						mylayer.successMsg("您尚未登录"	);
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						 layer.confirm('确定退出该用户么？', function(index){
					          	$.post(
					          		"${path}/userInfo/ExitUser.shtml",
					          		function(result) {
					          			if(result.success) {
					          				mylayer.successMsg(result.msg);
					          				location.href = "${path}/home/home.shtml"; 
					          			} else {
					          				mylayer.errorMsg(result.msg);
					          			}
					          		},
					          		"json"
					          	);
					          });
					}
				});
		
		function submitForm() {
			$.post(
				"${path}/user/login.action",
				$("#form").serialize(),
				function(result) {
					console.log(result);
					if(result.success) {
						mylayer.successMsg(result.msg);
						//当你在iframe页面关闭自身时获得当前弹出框的index索引
						var index = parent.layer.getFrameIndex(window.name);
						// js一个方法，定时器，1000毫秒之后自动执行function里面的代码
						setTimeout(function() {
							 // 关闭弹出层
							 parent.layer.close(index); 
							 // 刷新父页面
							 window.parent.location.reload();
						}, 1000);
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		}
	</script>

	<!-- 分类下拉  -->
	<script>
		$(function() {
			//监听一级菜单移入
			$(".Category1>li").mouseenter(function() {
				var $Category2 = $(this).children(".Category2");
				$Category2.stop();
				$Category2.slideDown(300);
			});

			$(".Category1>li").mouseleave(function() {
				var $Category2 = $(this).children(".Category2");
				$Category2.stop();
				$Category2.slideUp(300);
			});

		});
	</script>


</body>
</html>
